<template>
  <div>
    <div class="nav">
      <div class="left">
        <img
          src="../../public/1.webp"
          style="
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: 20px;
          "
        />
      </div>
      <div class="right">
        <van-icon
          name="eye-o"
          size="20px"
          style="
            width: 33%;
            height: 60px;
            text-align: center;
            line-height: 60px;
          "
        />
        <van-icon
          name="manager-o"
          size="20px"
          style="
            width: 33%;
            height: 60px;
            text-align: center;
            line-height: 60px;
          "
        />
        <van-icon
          name="add-o"
          size="20px"
          style="
            width: 33%;
            height: 60px;
            text-align: center;
            line-height: 60px;
          "
        />
      </div>
    </div>
    <div class="main">
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
      />
      <van-tabs v-model:active="active" swipeable>
        <van-tab title="消息">
          <news />
        </van-tab>
        <van-tab title="密友">
          <news />
        </van-tab>
        <van-tab title="好友">
          <friends />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import news from "./message/News.vue";
import friends from "./message/Friends.vue";

export default {
  setup() {
    //消息
    const state = reactive({
      avatar: "../../public/1.webp",
      latest: "你好啊",
      nickname: "李仙女",
      time: "2021-07-14 16:34:12",
    });

    //标签
    const active = ref(0);

    //搜索栏
    const value = ref("");

    return {
      active,
      value,
      state,
    };
  },
  components: {
    news,
    friends,
  },
};
</script>

<style scoped>
.nav {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
}
.left {
  padding-top: 10px;
  width: 20%;
}
.right {
  width: 30%;
}
</style>